<template>
    <div class="views" :style="styleColor">
        <!-- 企业性质 -->
        <div class="views_top">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>企业性质</span>
            </div>
            <div class="right">
                <div class="tabBtn" :class="active == '1' ? 'actived' : ''" @click="active = '1'">
                    资质分类
                </div>
                <div class="tabBtn" :class="active == '2' ? 'actived' : ''" @click="active = '2'">行业分类</div>
                <div class="tabBtn" :class="active=='3'?'actived':''" @click="active='3'">海关注册类型</div>
            </div>
        </div>
        <div  v-if="active=='1'" style="width:100%;height:185px">
               <FirstView></FirstView>
        </div>
       
        <div v-if="active=='2'" style="width:100%;height:185px">
             <SecondView></SecondView>
        </div>
        <div v-if="active=='3'" style="width:100%;height:185px">
            <thirdView></thirdView>
        </div>
    </div>
</template>

<script>
import FirstView from './components/firstView.vue'
import SecondView from './components/SecondView'
import thirdView from './components/thirdView'
import countTo from 'vue-count-to'
import { mapGetters } from 'vuex'

export default {
    components:{
        SecondView,
        countTo,
        FirstView,
        thirdView
    },
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
            options: {},
            active: '1',
           
        }
    },
    watch:{
     
    },
    computed: {
        ...mapGetters(['customCode']),
        transStyle() {
            
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    created(){
      
    },
    mounted() {
        this.options = this.value
       
    },
    methods:{
    
    }
}
</script>

<style lang="scss" scoped>
.views_top {
    height: 40px;
    display: flex;

    .left {
        width: 180px;
        display: flex;
        align-items: center;

        .imgOne {
            width: 35px;
            height: 40px;
        }

        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }

        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }

    .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.53);

        .tabBtn {
            width: 100px;
            height: 25px;
            font-size: 14px;
            border: 1px solid transparent;
            margin-left: 5px;
            line-height: 24px;
            border-radius: 5px;
            cursor: pointer;
        }

        .actived {
            border: 1px solid #00c1ff;
            color: #00c1ff;
        }

    }
}

.secondView {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 185px;
    .top {
        color: #fff;
        font-size: 20px;
        display: flex;
        flex-direction: column;
    }
    .count {
        margin-left: 20px;
        color: #00ffff;
        font-size: 60px;
        font-family: "Agency FB W00 Regular";
    
        letter-spacing: 1px;
    }
}
</style>

